import CommandDemo from './jsx/api/Command.js';

# Command

Command is the base class for all regl-based drawing commands. Wrap this class inside another class to use it.

##### Properties generally implemented by wrapping classes

| Name          | optional | type                        | Default | Description                                                                 |
| ------------- | -------- | --------------------------- | ------- | --------------------------------------------------------------------------- |
| `reglCommand` | no       | `(Regl) => (Props) => void` |         | The command that takes the `regl` function and children and draws the shape |

##### Properties generally passed through wrapping classes

| Name         | optional | type               | Default | Description                                                                       |
| ------------ | -------- | ------------------ | ------- | --------------------------------------------------------------------------------- |
| `children`   | no       | `Array<any> or any` |         | Arbitrary properties passed into reglCommand.                                     |
| `layerIndex` | yes      | `number`           |         | defines the draw order of each command, e.g. -1 will put the shape in lower layer |

Props relating to events are also passed through to Command instances. See Mouse Events for more.

Sample usage:

```js
import Worldview, { withPose, Command } from "regl-worldview";

// define our regl command
const reglTriangle = (regl) => ({
  vert: `
    precision mediump float;
    attribute vec2 position;
    void main () {
      gl_Position = vec4(position, 0, 1);
    }
  `,
  frag: `
    precision mediump float;
    uniform vec4 color;
    void main () {
      gl_FragColor = color;
  }`,
  attributes: {
    position: regl.prop("points"),
  },
  uniforms: {
    color: regl.prop("color"),
  },
  count: regl.prop("points.length"),
});

// define a Triangle React component to render with our regl command
function Triangle({ color }) {
  return (
    <Command reglCommand={reglTriangle}>
      {{
        color,
        points: [[-1, 0], [0, -1], [1, 1]],
      }}
    </Command>
  );
}

// pass our Triangle component to worldview
function CommandDemo() {
  return (
    <div style={{ height: 500 }}>
      <Worldview>
        <Triangle color={[0, 0, 1, 1]} />
      </Worldview>
    </div>
  );
}
```

<CommandDemo />
